import React from 'react';
import { MoonIcon, SunIcon } from '@radix-ui/react-icons';
import { observer } from 'mobx-react-lite';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import appStore from '@/store/app';

export const ModeToggle = observer(() => {
    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button variant='ghost' className='w-9 px-0'>
                    <SunIcon className='h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
                    <MoonIcon className='absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
                    <span className='sr-only'>Toggle theme</span>
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align='end'>
                <DropdownMenuItem onClick={() => appStore.setMode('light')}>Light</DropdownMenuItem>
                <DropdownMenuItem onClick={() => appStore.setMode('dark')}>Dark</DropdownMenuItem>
                <DropdownMenuItem onClick={() => appStore.setMode('system')}>System</DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    );
});
